<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .innerpic.active{
        display: block;
    }
    .innerpic{
        width: 100%;
        height: 100%;
        display: none;
    }

    .pic{
        margin: 0 auto;
        width: 1080px;
        height: 600px;
    }
    img{
        width: 1080px;
        height: 600px;
        /* position: relative;
        overflow: hidden; */
        object-fit: cover;
    }

    #pre, #next{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        font-size: 24px;
        background: rgb(0,0,0,0.3);
        color: white;
        border: none;
        cursor: pointer;
        z-index: 10;
    }
    #pre{
        left:10px;
        }
    #next{
        right: 10px;
    }

    .dots{
        text-align: center;
        margin-top: 10px;
    }
    .dot {
        display:inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background:green;
        margin: 0 5px;
        cursor: pointer;
    }
    .dot.active{
        background-color: #333;
    }
</style>
<body>
    <div class='box'>
        <div class="pic">
            <img class="innerpic" src="C:\Users\zhh2\OneDrive\图片\初音未来 赏月 星空 4k壁纸 3840_2160_彼岸图网_waifu2x_photo_noise3.png" alt="pic1">
            <img class="innerpic" src="D:\图\微信图片_20251026182211_75_18.jpg">
            <img class="innerpic" src="C:\Users\zhh2\OneDrive\图片\Image_1707400293885_waifu2x_photo_noise3.png" alt="pic3">
        </div>
        <button id="pre">&lt;</button>
        <button id="next">&gt;</button>
        <div class="dots" id="dots">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <script>
        const pic = document.querySelector('.pic')
        const img = document.querySelectorAll('.innerpic')
        const pre = document.querySelector('#pre')
        const next = document.querySelector('#next')
        const dots = document.querySelectorAll('.dot')
        let index = 0
        let timer = null
        function changeImg(){
            img.forEach((img, i)=>{
                img.classList.toggle('active', i === index);
            });
            dots.forEach((dot, i )=>{
                dot.classList.toggle('active', i ===index);
            });
        }
        next.addEventListener('click',function(){
            index++;
            if (index >=img.length){
                index = 0;
            }
            changeImg();
            clearInterval(timer);
            autoPlay();
        });

        pre.addEventListener('click',function(){
            index --;
            if(index < 0 ){
                index = img.length -1;
            }
            changeImg();
            clearInterval(timer);
            autoPlay();
        });
        function autoPlay(){
            timer = setInterval(() =>{
                index++;
                if (index >= img.length){
                    index = 0;
                }
                changeImg();
            },3000);
        }

        pic.addEventListener('mouseenter',function(){
            clearInterval(timer);
        });

        pic.addEventListener('mouseleave',function(){
            autoPlay();
        });

        autoPlay();
    </script>
</body>
</html>